<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <header th:replace="header::html"></header>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="name" placeholder="请输入角色名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" onclick="xadmin.open('添加角色','/role/add',600,400)"><i
                            class="layui-icon"></i>添加角色
                    </button>
                </div>
                <!--这次出添加查询的列表-->
                <div class="layui-card-body">
                    <table class="layui-hide" id="table" lay-filter="member"></table><!--在主体部分添加一个table-->
                </div>
                <div class="layui-card-body">
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var form = layui.form;
        //第一个实例
        table.render({
            elem: '#table'//锁定标签id
            , url: '/role/list' //数据接口
            , page: true //开启分页
            , response: {
                countName: 'count',
                dataName: 'datas'//规定数据列表的字段名称，默认data
            }
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: "left"}
                    , {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                    , {field: 'name', title: '角色名'}
                    , {field: 'description', title: '角色描述'}
                    ,{fixed:'right',title:'操作',toolbar:'#barDemo',width:150}
                ]
            ]
        });
        //监听工具条
        table.on('tool(member)', function (obj) {//layui-filter相当于id
            var data = obj.data;
            if (obj.event == 'del') {//如果点击删除
                layer.confirm('真的删除行吗', function (index) {
                    $.ajax({
                        url: "/role/delete",
                        type: "GET",
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (result) {
                            layer.alert("删除成功", {icon: 1}, function (index1) {
                                layer.close(index1);
                                table.reload('table');
                            });
                        },
                    });
                });

            } else if (obj.event == 'edit') {//如果点击编辑
                xadmin.open('编辑用户信息', '/role/edit/?id=' + data.id);//进入url拼接id
            }

        })

        //监听提交
        form.on('submit(search)', function (data) {
            var name = data.field.name;
            table.render({
                elem: '#table'//锁定标签id
                , url: '/role/findUserByFuzzyUsername?name=' + name //数据接口
                , page: true //开启分页
                , response: {
                    countName: 'count',//相应的数据
                    dataName: 'datas'//规定数据列表的字段名称，默认data
                }
                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: "left"}
                        , {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                        , {field: 'name', title: '角色名'}
                        , {field: 'description', title: '角色描述'}
                        ,{fixed:'right',title:'操作',toolbar:'#barDemo',width:150}
                    ]
                ]
            });

            return false;
        });
    });
</script>

<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</html>